<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>上传文件</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <style type="text/css">
        .spot{
            height: 50px;

        }
    </style>
    <script>
        $(document).ready(function(){
            var spotMax = 30;
            if($('div.spot').length >= spotMax) {$(obj).hide();}
            $("input#add").click(function(){     addFileInput(this, spotMax);
            });
        });

        function addFileInput(obj, sm) {

            var sizeNum = $('div.spot').length+1;

            $('div#spots').append(
                '<div class="spot">' +
                '文件' + sizeNum +
                '：<input type="file" name="file" /> ' +
                '<input type="button" class="remove" value="删除" /></div>')
            .find("input.remove").click(function(){
                $(this).parent().remove();
                $('input#add').show();
            });

            if($('div.spot').length >= sm) {$(obj).hide();}
        };
    </script>
</head>
<body>
<div style="width:100%;text-align:center">
    <br><br>
    <h3>Excel文件合并</h3>
    <br>
<form method="post" enctype="multipart/form-data" th:action="@{/excelMerge/mergeAndExport}">
    <div id="spots">
    <div class="spot">文件1：<input type="file" name="file"/>
        <input type="button" class="remove" value="删除" />
    </div>
    </div>
    <br><br><br><br><br>
    <input type="button" id="add" value="新增文件"/>
    <input type="reset" value="重置"/>
    <input type="submit" value="合并导出"/><br>
</form>
</div>
</body>
</html>